<template>
  <div>
    <Tabs v-model:activeKey="activeKey" centered class="h-full">
      <TabPane v-for="item in tabList" :key="item.key" :tab="item.title" class="h-full" />
      <template #rightExtra>
        <a-button type="primary" @click="handleCreate">新增</a-button>
      </template>
    </Tabs>
    <ConfigManagementTable :activeKey="activeKey" v-if="isShow" />
    <ConfigManagementModal
      @register="registerConfigManagementModal"
      @success="handleConfigManagementModalSuccess"
    />
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { Tabs, TabPane } from 'ant-design-vue';
  import { useModal } from '/@/components/Modal';
  import ConfigManagementTable from './modules/ConfigManagementTable.vue';
  import { tabList } from './configManagement.data';
  import ConfigManagementModal from './modules/ConfigManagementModal.vue';
  const activeKey = ref('');
  const isShow = ref(true);
  const [registerConfigManagementModal, { openModal }] = useModal();
  const handleCreate = () => {
    openModal(true, {});
  };
  const handleConfigManagementModalSuccess = () => {
    isShow.value = false;
    setTimeout(() => {
      isShow.value = true;
    }, 10);
  };
</script>
